<script setup>
import { ref } from 'vue'
import axios from 'axios';
import { useRouter, RouterLink } from 'vue-router';
import { showMsg } from '@/components/Util';
let router = useRouter();//路由对象 用来做路由跳转
let uname = ref('');
let pwd = ref('');
let mobile = ref('');
let name=ref('');
function login() {
    if (uname.value && pwd.value && mobile.value && name.value) {
        axios.post('/api/zhuce', { uname: uname.value, pwd: pwd.value, mobile: mobile.value ,name:name.value}, {
            headers: {
                "Content-Type": "application/json"
            }
        }).then(res => {
            if(res.data.status==200){
                router.push('/');
            }else{
                showMsg(res.data.msg,'error',2000);
            }
        })
    }else{
        showMsg("表单填写不完整",'error',2000);
    }
}
</script>
<template>
    <div class="box">
        <div class="right">
            <div class="text">注册账号</div>
            <input type="text" v-model="name" name="" id="" placeholder="用户名" /> 
            <input type="text" v-model="uname" name="" id="" placeholder="账号名" /> 
            <input type="password" v-model="pwd" name="" id="" placeholder="密码" />
            <input type="text" v-model="mobile" name="" id="" placeholder="手机号" />
            <input type="button" value="注册" @click="login" />
            <span>已有账号<RouterLink to="/login" style="color: blue;">登录</RouterLink></span>
        </div>
    </div>
</template>
<style scoped>
.box {
    width: 400px;
    height: 250px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url("../assets/R-C.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
}
.right {
    width: 250px;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.text {
    font-size: 22px;
    font-weight: bold;
}

input {
    width: 190px;
    height: 25px;
    border: none;
    outline: none;
    border-radius: 10px;
}
</style>